<template>
  <div
    class="all"
    :style="{ height: screenHeight + 'px', width: screenWidth + 'px' }"
  >
    <Return txt="收藏"></Return>
    <div class="input">
      <van-icon v-if="search == ''" class="input_icon" name="search" />
      <input type="text" class="inputAl" v-model="search" placeholder="搜索" />
    </div>
    <div class="list">
      <div class="listOne" style="width: 30%" @click="tap(1)">图片与视频</div>
      <div class="line">|</div>
      <div class="listOne" @click="tap(2)">链接</div>
      <div class="line">|</div>
      <div class="listOne" @click="tap(3)">文件</div>
      <div class="line">|</div>
      <div class="listOne" @click="tap(4)">语音</div>
      <div class="listOne" style="width: 30%" @click="tap(5)">聊天记录</div>
      <div class="line">|</div>
      <div class="listOne" @click="tap(6)">笔记</div>
      <div class="line">|</div>
      <div class="listOne" @click="tap(7)">位置</div>
    </div>
    <div class="message">
      <img src="../../assets/images/user_img.png" alt="" />
      <span>测试用户 今天</span>
    </div>
  </div>
</template>
<script>
import Return from "../../components/return";
export default {
  components: {
    Return,
  },
  data() {
    return {
      screenWidth:
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth,
      screenHeight:
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight,
      search: "",
    };
  },
  methods: {
    tap(index) {
      this.$router.push({ path: "/shoucangmore", query: { type: index } });
    },
  },
};
</script>
<style scoped>
.all {
  background: #4AC7D7;
}
.input {
  height: 50px;
  width: 100%;
  text-align: center;
  line-height: 50px;
  position: relative;
  background: #4AC7D7;
}
.input_icon {
  position: absolute;
  left: 43%;
  top: 15px;
  font-size: 18px;
}
.inputAl::-webkit-input-placeholder {
  padding-left: 5%;
}
.inputAl {
  height: 35px;
  width: 96%;
  border: none;
  text-align: center;
}
.list {
  width: 96%;
  height: 150px;
  margin-left: 2%;
  background: #fff;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  color: #7587a5;
  border-radius: 5px;
}
.listOne {
  width: 21%;
  text-align: center;
}
.message {
  width: 96%;
  height: 150px;
  margin-left: 2%;
  background: #fff;
  display: flex;
  justify-content: center;
  flex-direction: column;
  color: #7587a5;
  border-radius: 5px;
  margin-top: 5px;
}
.message img {
  width: 80px;
  height: 80px;
  margin: 0 20px;
}
.message span {
  font-size: 16px;
  margin-top: 20px;
  color: #bdbdbd;
  margin-left: 20px;
}
</style>